<template>
  <!--<el-container> 作为模板的最外层元素，具有响应式布局-->
  <el-container>
    <el-card class="grey-box" shadow="never">
      <div style="font-size: 10px">@Copyright by Samuel Chan 2024-2025</div>
    </el-card>
  </el-container>
</template>

<script setup>
</script>

<style scoped>
/* scoped限制css样式仅限于本组件,以免造成冲突 */
.grey-box {
  color: hsl(145, 79%, 49%); /* 文字颜色 */
  height: 30px; /* 设置一个明确的高度，可以根据需要调整 */
  display: flex; /* 使内部元素能够居中对齐 */
  justify-content: center;
  align-items: center;
  padding: 5px;
  position: fixed; /* 设置为固定定位 */
  bottom: 0; /* 距离底部的距离 */
  left: 0; /* 确保占据整个水平空间 */
  right: 0; /* 确保占据整个水平空间 */
  width: 100%; /* 设置宽度为全屏 */
}
</style>
